<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    
  <div id="app">
            <fa></fa>
  </div>
  <script>
      
    // provide(供应) & inject（注入） 
    const app = Vue.createApp({})
    // options api用法
     app.component('fa',{
         template:`<div> <c1 /> <h1> {{c}} </h1> <button @click="c=999">我是fa里面的按钮</button> </div> `,
         data(){
             return{
                c:456
             }
         },
         // 如果希望provide访问到组件内部的属性 如data里面的内容，要把provide
         // 转换成一个函数返回一个对象
         provide(){
             return {
                 // 如果我们希望返回的是一个响应式的数据的话我们得借助 computed函数
                name: Vue.computed(()=>this.c)
                 // computed 返回的内容要使用.value来读取值
             }
         },
    })

     app.component('c1',{
        template:`<div> <d1 /></div> `,
        provide:{
            kfc:'himan'
        }
     })

     app.component('d1',{
        template:`<div>
            {{name}}  {{kfc}}
        </div>`,
        inject:['name','kfc']
     })


    app.mount('#app')


  </script>





</body>
</html>